@import '~theme/helpers';

:host ::ng-deep {
  .mdl-card {
    padding: 0;
    width: $employer-form-width;
    background-color: $background-color;
    margin: 16px auto;
    height: auto;
  }

  .mdl-radio {
    width: 20%;
    margin-top: 22px;
    margin-bottom: 22px;
    color: $employer-form-color-brighter;
  }

  .form__article > span {
    float: left;
    width: 100%;
    color: $employer-form-color-darker;
    font-weight: 200;
  }

  .mdl-card__title {
    background-color: $color-accent;
    height: 66px;
    width: 100%;
    padding-top: 16px;
    padding-left: $employer-form-horizontal-padding;
    padding-right: $employer-form-horizontal-padding;
    padding-bottom: 0;
    display: block;

    @include typo-employer-form-header();
  }

  button.mdl-button.mdl-button--colored {
    width: 68px;
    height: 32px;

    @include typo-employer-form-button();

    background-color: $color-primary;

    &:disabled {
      // NOTE: $color-gray is different
      background-color: gray;
      color: $employer-form-color-darker;
    }
  }

  label {
    font-size: 15px;
    color: $employer-form-color-darker;
  }

  .form__action {
    .mdl-checkbox {
      .mdl-ripple {
        background: $color-primary;
      }

      &.is-checked {
        .mdl-checkbox__box-outline {
          border-color: $color-primary;

          .mdl-checkbox__tick-outline {
            background-color: $color-primary;
            background-image: url("#{$image-path}/tick_dark.svg?embed");
          }
        }
      }
    }
  }
}

.employer-form__general_skills {
  margin-top: 24px;

  div {
    width: 100%;
  }

  .mdl-textfield label {
    color: $employer-form-color-darker;
  }

  .mdl-textfield--floating-label.is-focused .mdl-textfield__label {
    color: $color-primary;
  }

  textarea {
    height: 90px;
  }
}

.employer-form__contacts {
  div {
    .mdl-textfield.getmdl-select .mdl-textfield__input {
      color: $employer-form-color-darker;
    }

    .mdl-textfield {
      padding-top: 0;

      label {
        top: 4px;
        font-weight: 300;
      }
    }

    i {
      color: $employer-form-color-brighter;
    }
  }
}
